<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<html>
	<%@include file="/common/simpleFrame.jsp"%>
	<!-- 隐藏域记录当前版块ID -->
	<input type="hidden" id="blockId" name="blockId" value="${blockId}">
	<div id="readPostContainer">
		<table id="headerTable">
			<tr>
				<td colspan="3" align="right">
					跳转到：
					<select style="width: 150px;"></select>
					<button id="readPostBack">
						返回
					</button>
					<c:if test="${userName!=null}">
						<button id="scrollToComment">
							快速回复
						</button>
						<button id="newPostBtn">
							发新帖
						</button>
					</c:if>
				</td>
			</tr>
			<tr>
				<td width="70%">
					主题：关于神马神马的神马关于神马神马的神马关于神马神马的神马关于神马神马的神马
				</td>
				<td width="15%" align="right">
					阅读数：100000
				</td>
				<td width="15%" align="right">
					回复数：10000
				</td>
			</tr>
		</table>
		<table id="contentTable" cellpadding="0" cellspacing="0">
			<thead>
				<tr>
					<th width="20%">
						作者
					</th>
					<th width="80%">
						内容
					</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<table id="postFooterTable">
			<tr>
				<td width="40%">
					<div id="postNav">
						这里是上一帖、下一帖
					</div>
				</td>
				<td>
					<div id="pagingToolBarArea">
					</div>
				</td>
			</tr>
			<tr>
				<c:if test="${userName==null}">
					<td colspan="2">
						<div id="postBottomAdv">
							这里是广告区域啊---如果用户已经登录，右侧出现回复框
						</div>
					</td>
				</c:if>
				<c:if test="${userName!=null}">
					<td>
						<div id="postBottomAdv">
							这里是广告区域啊---如果用户已经登录，右侧出现回复框
						</div>
					</td>
					<td>
						<form id="commentPostForm" action="commentPost.action" method="post">
							<!-- 隐藏域记录主帖ID -->
							<input type="hidden" id="parentId" name="parentId" value="${postId}">
							<div id="postBottomEdit">
								<input type="hidden" id="content" name="content">
								<textarea id="postContent" name="postContent"
									style="width:100%;height:300px;visibility: hidden;"></textarea>
							</div>
						</form>
					</td>
				</c:if>
			</tr>
			<tr>
				<td colspan="2">
					<div id="postBottomSubmit">
						跳转到：<select style="width: 150px;"></select>
						<c:if test="${userName!=null}">
							<input type="checkbox">引用上一条</input>
							<button id="submitCommentBtn">
								提交
							</button>
							<button id="readPostBack2">
								返回
							</button>
						</c:if>
					</div>
				</td>
			</tr>
		</table>
	</div>
	<link href="../css/readPost.css" type="text/css" rel="stylesheet" />
	<!-- JQuery分页工具条插件 -->
	<link rel="stylesheet" type="text/css" href="../common/jquery.paginate/css/jquery.paginate.css" media="screen" />
	<script src="../common/jquery.paginate/jquery.paginate.js" type="text/javascript"></script>
	<script charset="utf-8" src="${pageContext.request.contextPath}/common/kindeditor3.5.5/kindeditor.js"></script>
	<script charset="utf-8" src="${pageContext.request.contextPath}/common/kindeditor3.5.5/plugins/code/plugin_code.js"></script>
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/common/kindeditor3.5.5/plugins/code/plugin_code.css"/>
	
	<script type="text/javascript">
		$().ready(function(){
			$("#newPostBtn").click(function(){
				window.location.href="writePost.jsp";
			})
		})
	</script>
	
	<c:if test="${posts!=null}">
		<script type="text/javascript">
			var posts=${posts};
			$().ready(function(){
				//填充帖子表格
				$.tpl('post', [
				    "<tr>",
					"<td valign='top'>",
						//以下是每个帖子的用户信息区，一共11个参数
						"<div>",
						"	<div>",
						"		<img src='../images/myface.jpg'></img>",
						"	</div>",
						"	<div>",
						"		<a href='../blog/personalMain.jsp'><font color='#FFCC00'>{nickName:s}</font></a>",
						"		<span style='color: #ff3300;'>忆唐管理员</span><br/>",
						"		等级：{gradeName:s}<br/>",
						"		性别：{gender:s}<br/>",
						"		来自：{cityId:s}<br/>",
						"		文章数：{articles:s}<br/>",
						"		帖子数：{posts:s}<br/>",
						"		总点击：{allTimes:s}<br/>",
						"		金币数：{money:s}$<br/>",
						"		状态：{state:s}<br/>",
						"		认证：{examGrade:s}<br/>",
						"		QQ：{qq:s}<br/><br/>",
						"	</div>",
						"	<div>",
						"		<a href='#'>详细资料</a> <a href='#'>发短信</a><br/>",
						"		<a href='#'>写留言</a> <a href='#'>加关注</a><br/>",
						"	</div>",
						"</div>",
						//每个帖子的用户信息区end
					"</td>",
					"<td>",
					"<div class='postContentContainer'>",
					"<div class='pTopDiv1'>",
					"	发表时间：{time:s} ",
					"</div>",
					"<div class='pTopDiv2'>",
					'<c:if test="${userName!=null}">',
					"	编辑 引用 收藏",
					'</c:if>',
					'<c:if test="${DEL_POST!=null}">',
					"	<a href='delPost.action?postId={postId:s}&parentId={parentId:s}'>删除</a>",
					'</c:if>',
					"</div>",
					"<img class='postInnerHLine' src='../images/u84.png' />",
					"<div class='postContent'> ",
					"	{content:s}  ",
					"</div>",
					"<img class='postInnerHLine' src='../images/u84.png' />",
					"<div class='postAdv'> ",
					"	这是广告条啊，广告怎么加载啊，啊！啊！啊！",
					"</div>",
					"<div class='postFooter'>",
					"	1楼",
					"	<button>回顶楼</button>",
					"	<button>他的主页</button>",
					"	<button>他的帖子</button>",
					"	<button>收藏此帖</button>",
					"</div>",
					"</div>",
					"</td>",
					"</tr>"
				]);
				
				var resultStr="";
				$.each(posts,function(idx,item){
					resultStr+=$.tpl('post',{
						//取用户信息
						nickName:item.nick_name,
					    gradeName:item.grade_name,
						gender:item.gender,
						cityId:item.city_id,
						articles:item.articles,
						posts:item.posts,
						allTimes:item.all_times,
						money:item.money,
						state:item.state,
						examGrade:item.exam_grade,
						qq:item.qq,
						//取帖子信息
					    time:item.time,
					    postId:item.post_id,
					    parentId:item.parent_id,
					    content:item.content
					}, true);
				});
				$("#contentTable").append(resultStr);
				
				//初始化回帖KindEditor
				KE.show({
					id : 'postContent',
					resizeMode : 1,
					allowPreviewEmoticons : false,
					allowUpload : false,
					/*
					filterMode:true,
					htmlTags:{
						pre:['class','/'],
						a:['class', 'href', 'target', 'name', 'style'],
				        embed:['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality',
				        'style','align','allowscriptaccess','/'],
				        img:['src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style', '/'],
				        hr:['class', '/'],
				        br:['/']
					},
					*/
					items : [
					'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline',
					'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
					'insertunorderedlist', '|', 'emoticons', 'image', 'link','code'],
					afterCreate : function(id) {
						KE.event.ctrl(document, 13, function() {
							KE.sync(id);
						});
						KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
							KE.sync(id);
						});
						KE.util.focus(id);
					}
				});
				
				
				$("#submitCommentBtn").click(function(){
					//跟帖内容校验
					var pContent=KE.text('postContent');
					var msg="";
					if(!pContent){
						msg+="没有内容的帖子能说明啥呀亲<br>";
					}else if(pContent.length<20){
						msg+="帖子内容必须大于20个字符哦亲<br>";
					}else if(pContent.length>2000){
						msg+="跟帖内容不能大于2千个字符哦亲<br>";
						msg+="当前字符总数:"+pContent.length+"，超出:"+(pContent.length-2000)+"个字<br>";
					}
					//这里是不是还有一个敏感词校验？
					if(msg){
						showSysMsg(msg,5000);
						return;
					}
					$("#content").val(KE.html('postContent'));
					$("#commentPostForm").submit();
				});
				
				$("#readPostBack").click(function(){
					window.location.href="loadPosts30.action?blockId="+$("#blockId").val();
				});
				$("#readPostBack2").click(function(){
					window.location.href="loadPosts30.action?blockId="+$("#blockId").val();
				});
				
				$("#scrollToComment").click(function(){
					$body = (window.opera)?(document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
					$body.animate({scrollTop: $('#postBottomEdit').offset().top}, 500);
					KE.util.focus('postContent');
				})
				
				//设置footerDiv的位置
				$("#footer").css("top",$("#postBottomSubmit").offset().top+$("#postBottomSubmit").height());
			})
		</script>
	</c:if>
	
	<!-- 代码高亮 -->
	
	<!-- 分页工具条 -->
	<c:if test="${totalPages!=null&&totalPages>1}">
		<script type="text/javascript">
			$(document).ready(function(){
				//显示分页工具条
				$("#pagingToolBarArea").paginate({
					count:${totalPages}, 				//总页数
					start:${pageIndex},					//默认选中第几页
					display:50,							//显示的分页数
					border: true,						//是否有边框
					border_color: '#000',				//边框颜色
					text_color: '#000',					//分页文字颜色
					background_color: '#fff',			//分页背景颜色	
					border_hover_color:'#000',			//边框鼠标移入上去颜色
					text_hover_color:'#000',			//文字鼠标移入上去颜色
					background_hover_color:'#ff6600',	//背景鼠标移入上去颜色
					images: false,						//翻页是否用图片显示
					mouse: 'press',
					onChange: function(page){			//点击事件
							     //切换分页时需要传递：主帖ID，页码
								 var parentId=$("#parentId").val();
							  	 window.location.href="readPost.action?postId="+parentId+"&pageIndex="+page;
							  }
				});
			})
		</script>
	</c:if>
</html>
